<template>
    <div>
        <DataDisplayItem
            v-for="displayItem in DisplayItemList"
            :key="displayItem.key"
            :componentType='displayItem.componentType'
            :componentTitle="displayItem.componentTitle"
            :itemList="itemList"
        />
    </div>
</template>

<script>
    import DataDisplayItem from '@/components/DataDisplayItem.vue'

    export default {
        name: "DataDisplay",
        components: {
            DataDisplayItem
        },
        props: {
            DisplayItemList: {
                type: Array,
                default: function () {
                    return [
                        {
                            key: 0,
                            componentType: 'dataItemList',
                            componentTitle: '宿舍信息',
                        },
                    ]
                }
            }
        },
        data() {
            return {
                itemList: [
                    { key: 0, itemStyle: 'itemStyle-two', itemTitle: '宿舍温度', itemContent: '6.8℃' },
                    { key: 1, itemStyle: 'itemStyle-two', itemTitle: '监控摄像头数量', itemContent: '2' },
                    { key: 2, itemStyle: 'itemStyle-two', itemTitle: '门房智能锁', itemContent: '上锁' },
                    { key: 3, itemStyle: 'itemStyle-two', itemTitle: '客厅窗帘', itemContent: '打开' },
                    { key: 4, itemStyle: 'itemStyle-two', itemTitle: '卧室窗帘', itemContent: '关闭' },
                    { key: 5, itemStyle: 'itemStyle-two', itemTitle: '智能空调', itemContent: '待机' },
                    { key: 6, itemStyle: 'itemStyle-two', itemTitle: '智能供热', itemContent: '待机' },
                ]
            }
        }
    }
</script>

<style scoped>

</style>
